<template>
  <view class="familyT-box">
    <view class="title-box">
      <u-cell-group>
        <u-cell-item title="家庭授权" :arrow="false" :title-style="{fontSize:'40rpx',fontWeight:700,color:'#000'}">
          <text class="but-right" @click="openFamilyAuthorization">新增</text>
        </u-cell-item>
      </u-cell-group>
    </view>

    <view class="current">
      <u-form :model="form" ref="uForm" :labelWidth="160" :label-style="{'paddingLeft':'10rpx'}">
        <view class="item-boxft">
          <u-form-item class="CntProtyStyle" label="当前房产" :border-bottom="false">
            <view @tap="selectBol.roomId=true" class="wd-100">
              <u-section :title="displayHouse" color="#4A7ED7" :show-line="false" :bold="false"
                :sub-title="null"></u-section>
              <u-select v-model="selectBol.roomId" :list="selectRoom"
                @confirm="selctConfirm($event,'roomId',true)"></u-select>
            </view>
          </u-form-item>
        </view>
      </u-form>
    </view>

    <!-- 成员列表渲染 -->
    <view class="content" :style="displayChange ? '' : {display:'none'}">
      <u-cell-group>
        <u-cell-item v-for="(item,index) in selectMember" icon="account-fill" :title="item.proprietorName"
          :label="item.proprietorTel" :key="index" :arrow="false" :value="seleCtome[item.householdType-1].label || '未定义'"
          ver-class="none"></u-cell-item>
      </u-cell-group>
    </view>

    <!-- 无成员时显示效果 -->
    <view class="content" :style="displayChange ? {display:'none'} : ''">
      <u-image width="250rpx" height="250rpx" src="/static/images/empty/bank.png" mode="widthFix">
        <u-loading slot="loading"></u-loading>
      </u-image>
      <view class="text mt-30">
        您还没有添加家庭成员，点击新增去添加~
      </view>
    </view>
  </view>
</template>

<script>
  import {
    getMemberInfo
  } from '@/api/getMemberApi.js'
  import {
    householdinfo
  } from '@/api/base/householdinfoApi.js'
  import {
    mapGetters
  } from 'vuex';
  export default {
    data() {
      return {
        displayValue: '',
        displayHouse: '',
        timerIntv: null,
        displayChange: 0,
        form: {
          roomId: '',
        },
        selectMember: [],
        selectRoom: [],
        seleCtome: [],
        selectBol: {
          roomId: false,
          proprietorId: false
        },
      }
    },

    // 获取房屋信息
    mounted() {
      this.getHouseInfo();
      this.getOptions();
    },

    computed: {
      ...mapGetters(['user_info']),
    },

    methods: {
      getOptions() {
        console.log(this.$dictTools.dictList('HOUSEHOLD_TYPE'))
        this.seleCtome = this.$dictTools.dictList('HOUSEHOLD_TYPE').map(e => ({
          label: e.text,
          value: e.value
        }));
        console.log('0000====', this.seleCtome);
      },
      openFamilyAuthorization() {
        uni.navigateTo({
          url: '/subPack/familyAuthorization'
        })
      },

      //根据业主获取房屋信息
      getHouseInfo() {
        const proprietorId = this.user_info.id;
        householdinfo({
            proprietorId
          })
          .then(response => {
            const newSelectData = response.map(data => ({
              value: data.roomId,
              label: data.roomInfo
            }));
            this.selectRoom = newSelectData;
            this.form.roomId = newSelectData[0].value
            this.displayHouse = newSelectData[0].label //默认第一个房产信息显示
            console.log(this.selectRoom, 'this.selectRoom');
            this.getMemberInfo();
          })
          .catch(error => {
            console.error('获取列表失败', error);
          });
      },

      //根据房产信息获取成员列表
      getMemberInfo() {
        const roomId = this.form.roomId;
        console.log(roomId)
        getMemberInfo({
            roomId
          })
          .then(response => {
            const newSelectData = response.map(data => ({
              proprietorName: data.proprietorName,
              proprietorTel: data.proprietorTel,
              householdType: data.householdType
            }));
            this.selectMember = newSelectData;
            console.log(this.selectMember, 'this.selectMember');
            if (this.selectMember.length > 0) {
              this.displayChange = 1
            } else {
              this.displayChange = 0
            }
          })
          .catch(error => {
            console.error('获取列表失败', error);
          });

      },
      selctConfirm(e, type, ishouseType) {
        if (ishouseType) {
          this.form[type] = e[0].value;
          this.displayHouse = e[0].label;
          this.getMemberInfo();
        }
      },
    },

    // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  }
</script>

<style lang="scss" scoped>
  .familyT-box {
    height: calc(100vh - 250rpx);
    overflow: auto;
  }

  .item-boxft {
    position: relative;
    margin-bottom: 5rpx;
    padding: 0 30rpx;
    background-color: #fff;
  }

  .quan-text {
    text-align: center;
    padding: 20rpx 120rpx;
    color: #999;
  }

  .po-but {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 30rpx 20rpx;
    box-shadow: 0px -5px 5px -5px rgba(0, 0, 0, 0.2);
  }

  .loading {
    margin-top: 100rpx;
    text-align: center;
  }

  .CntProtyStyle {
    padding: 0 0px;
  }

  .cp-flex {
    display: flex;
  }

  .hidden {
    display: none;
  }

  .content {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;

    .text {
      color: #999;
    }
  }

  .but-right {
    border: 1px solid $-color-but-wy;
    color: $-color-but-wy;
    border-radius: 50rpx;
    text-align: center;
    padding: 7rpx 20rpx;
  }
</style>